<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #canvas {
          background: #f1f1f1;
      }
  </style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<span style="font-size: 16px">Hello world</span>
<script>
    window.onload = () => {
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        // 绘制矩形
        const drawText = () => {
            ctx.font = "16px serif";
            // fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
            ctx.fillText("Hello world", 10, 50, 50);

            ctx.textAlign = 'start'
            // strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
            ctx.strokeText("Hello world", 10, 100,80);

            // 预测量文本宽度
            // measureText()
            // 将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。
            var text = ctx.measureText("Hello world"); // TextMetrics object
            console.log('measureText:',text)
        }
        drawText()
    }

</script>
</body>
</html>
